/* =====
    button
   ===== */

$h: 41px;

$h-small: 34px;

$h-mini: 28px;


$padding: 10px 20px;
$padding-border: 9px 19px;

$padding-small: 8px 16px;
$padding-small-border: 7px 15px;

$padding-mini: 5px 10px;
$padding-mini-border: 4px 9px;



.ui-button {
  display: inline-block;
  padding: $padding-border;
  font-size: $font-size-normal;
  vertical-align: middle;
  line-height: 1.5;
  border: 1px solid $color-border;
  border-radius: $radius-normal;
  background-color: $color-white;
  cursor: pointer;

  &:hover {
    color: $color-primary;
    background-color: $background-gray;
  }
  &:active {
    background-color: $background-gray-hover;
  }
  &.disabled {
    cursor: not-allowed;
    color: $color-text-disabled;
    &:hover,
    &:active {
      color: $color-text-disabled;
      background-color: $color-white;
    }
  }
}

/* -----
    size
   -----
   mini small
   ----- */
.ui-button.mini {
  padding: $padding-mini-border;
  font-size: $font-size-small;
  border-radius: $radius-mini;
}

.ui-button.small {
  padding: $padding-small-border;
  border-radius: $radius-small;
  font-size: $font-size-small;
}

/* -----
    color
   -----
   btn-warn  btn-primary
   ----- */
%front-color {
  color: $color-white;
}

$type-map: (primary, $color-primary), (error, $color-text-warn), (warn, $color-yellow), (focus, $color-blue);

@mixin colorBorderBack($color) {
  border-color: $color;
  background-color: $color;
}

@each $btn, $color in $type-map {
  .btn-#{$btn} {
    @extend %front-color;
    @include colorBorderBack($color);

    &:hover {
      color: $color-white;
      @include colorBorderBack(darken($color, 3%));
    }

    &:active {
      @include colorBorderBack(darken($color, 5%));
    }

    // disabled
    &.disabled {
      color: $color-white;
      @include colorBorderBack(lighten($color, 15%));

      &:hover,
      &:active {
        @include colorBorderBack(lighten($color, 15%));
      }
    }
  }
}

/* -----
    group
   -----
   ui-buttons
   ----- */

$type-map: (ui-button, $radius-normal), (btn-lg, $radius-mini), (btn-sm, $radius-small);

.ui-buttons {
  display: inline-flex;
  .ui-button {
    flex: 1 0 auto;
    border-left-width: 0;
    border-radius: 0;

    &:first-child {
      border-left-width: 1px;
    }
  }

  @each $btn, $radius in $type-map {
    .#{$btn} {
      &:first-child {
        border-top-left-radius: $radius;
        border-bottom-left-radius: $radius;
      }
      &:last-child {
        border-top-right-radius: $radius;
        border-bottom-right-radius: $radius;
      }
    }

  }
}

/* -----
    icon
   -----
   btn-icon
   ----- */
.ui-icon-button {
  display: inline-block;
  height: 24px;
  width: 24px;
  vertical-align: middle;
  text-align: center;
  line-height: 24px;
  border: 0;
  &:hover {
    color: $color-primary;
  }
}